import React, { useState } from 'react';
import { Typography, Button, Space, Card, Input } from 'antd';
// import type { ReactNode } from 'react';
import { AppstoreOutlined, UserOutlined } from '@ant-design/icons';
import './PageHeader.css'
import bell from '../assets/bell.png'
import user from '../assets/button_icon.png'
import down from '../assets/down.png'

/**
 * 页面头部组件
 * 用于显示页面标题、操作按钮等信息
 */
const PageHeader: React.FC = ({

}) => {
  const btnGroup = [
    {
      label: '仪器管理',
      style: { fontSize: '14px', color: '#666' },
      type: 'link',
    },
    {
      label: '公共平台',
      style: { fontSize: '14px' },
      ghost: true,
      type: 'primary',
    },
    {
      label: '安全管理',
      style: { fontSize: '14px', color: '#666' },
      type: 'link',
    },
    {
      label: '危化品管理',
      style: { fontSize: '14px', color: '#666' },
      type: 'link',
    },
  ]
  const [activeBtn, setActiveBtn] = useState(1);
  return (
    <div className='page-header'>
      <div className='header-left'>
        <div className='app-box'>
          <AppstoreOutlined />
        </div>
        <Input type="text" placeholder="请输入搜索内容" />
        <div className='btn-group'>
          {btnGroup.map((item,index) => (
            <div key={item.label} className={activeBtn === index ? 'act' : ''} style={item.style} >{item.label}</div>
          ))}
        </div>
      </div>
      <div className='header-right'>
        <img className='img-icon' src={bell} alt="" />
        <img style={{marginLeft:16}} className='img-icon' src={user} alt="" />
        <div style={{display:'flex',alignItems:'center',marginLeft:16,cursor:'pointer'}}>
          <div style={{fontSize:'18px',color:'#999999'}}><UserOutlined /></div>
          <div  style={{fontSize:'12px',color:'#333333',marginLeft:4}}>genee</div>
          <div><img style={{marginLeft:4}} className='img-icon' src={down} alt="" /></div>
        </div>  
      </div>
    </div>
  );
};

export default PageHeader;